<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-history"></i>
              DevOps操作时间线
            </h1>
            <p class="page-subtitle">查看DevOps操作历史和事件时间线</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ events.length || 0 }}</div>
              <div class="stat-label">总事件数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ events.filter(e => e.event_type === 'gitlab_commit').length || 0 }}</div>
              <div class="stat-label">代码提交</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ events.filter(e => e.event_type === 'jenkins_build').length || 0 }}</div>
              <div class="stat-label">构建任务</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工具栏：操作按钮 + 搜索过滤 -->
      <div class="search-filters glass-effect">
        <div class="toolbar-left">
          <el-button type="primary" @click="refreshTimeline" class="glass-button refresh-button" :loading="loading">
            <i class="fa fa-refresh"></i>
            刷新时间线
          </el-button>
          <el-button @click="exportTimeline" class="glass-button import-button">
            <i class="fa fa-download"></i>
            导出时间线
          </el-button>
          <el-button @click="loadMore" class="glass-button add-button">
            <i class="fa fa-plus"></i>
            加载更多
          </el-button>
        </div>

        <div class="toolbar-right">
          <div class="filter-group">
            <select v-model="selectedProject" @change="onProjectChange" class="glass-select">
              <option value="">所有项目</option>
              <option v-for="project in projects" :key="project.id" :value="project.id">
                {{ project.name }}
              </option>
            </select>
          </div>

          <div class="filter-group">
            <select v-model="selectedEnvironment" @change="onEnvironmentChange" class="glass-select">
              <option value="">所有环境</option>
              <option v-for="env in environments" :key="env.id" :value="env.id">
                {{ env.name }}
              </option>
            </select>
          </div>

          <div class="filter-group">
            <select v-model="selectedEventType" @change="onEventTypeChange" class="glass-select">
              <option value="">所有事件</option>
              <option value="gitlab_commit">GitLab提交</option>
              <option value="gitlab_merge">GitLab合并</option>
              <option value="jenkins_build">Jenkins构建</option>
              <option value="jenkins_deploy">Jenkins部署</option>
            </select>
          </div>

          <div class="filter-group">
            <select v-model="selectedUser" @change="onUserChange" class="glass-select">
              <option value="">所有用户</option>
              <option v-for="user in users" :key="user.id" :value="user.id">
                {{ user.first_name }}{{ user.last_name }}
              </option>
            </select>
          </div>

          <div class="filter-group">
            <select v-model="timeRange" @change="onTimeRangeChange" class="glass-select">
              <option value="today">今天</option>
              <option value="week">最近一周</option>
              <option value="month">最近一月</option>
              <option value="quarter">最近三月</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 时间线容器 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-history"></i>
          DevOps操作时间线
        </div>

        <!-- 时间线 -->
        <div class="timeline-container">
          <div class="timeline-line"></div>

          <div
            v-for="(event, index) in filteredEvents"
            :key="event.id"
            class="timeline-item"
            :class="getEventTypeClass(event.event_type)"
          >
            <div class="timeline-marker">
              <i :class="getEventIcon(event.event_type)"></i>
            </div>

            <div class="timeline-content">
              <div class="event-header">
                <div class="event-info">
                  <h3 class="event-title">{{ event.event_description }}</h3>
                  <div class="event-meta">
                    <span class="event-user">
                      <i class="fa fa-user"></i>
                      {{ event.user_username || '系统' }}
                    </span>
                    <span class="event-project">
                      <i class="fa fa-folder"></i>
                      {{ event.project_name }}
                    </span>
                    <span class="event-time">
                      <i class="fa fa-clock-o"></i>
                      {{ formatDate(event.event_time) }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="event-description">
                {{ event.event_description }}
              </div>

              <!-- 操作按钮 -->
              <div class="event-actions">
                <button class="action-button" @click="viewDetails(event)">
                  <i class="fa fa-eye"></i>
                  查看详情
                </button>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredEvents.length === 0" class="empty-timeline">
            <i class="fa fa-clock-o empty-icon"></i>
            <h3>暂无操作记录</h3>
            <p>在选定的时间范围内没有找到相关的DevOps操作记录</p>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore" class="load-more">
        <button class="glass-button" @click="loadMore" :disabled="loading">
          <i class="fa fa-spinner fa-spin" v-if="loading"></i>
          <i class="fa fa-chevron-down" v-else></i>
          {{ loading ? '加载中...' : '加载更多' }}
        </button>
      </div>
    </div>

    <!-- 事件详情模态框 -->
    <div v-if="detailModalVisible" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content glass-effect" @click.stop>
        <div class="modal-header">
          <h3>事件详情</h3>
          <button class="close-btn" @click="closeDetailModal">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="event-detail-content">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <span class="label">事件类型:</span>
                <span class="value">{{ getEventTypeText(selectedEvent?.event_type) }}</span>
              </div>
              <div class="detail-item">
                <span class="label">操作用户:</span>
                <span class="value">{{ selectedEvent?.user_username || '系统' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">项目名称:</span>
                <span class="value">{{ selectedEvent?.project_name }}</span>
              </div>
              <div class="detail-item">
                <span class="label">发生时间:</span>
                <span class="value">{{ formatDate(selectedEvent?.event_time) }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section" v-if="selectedEvent?.details">
            <h4>详细信息</h4>
            <pre class="detail-json">{{ JSON.stringify(selectedEvent.details, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { devopsTimelineApi } from '@/api/gitlab'
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'

// 响应式数据
const events = ref([])
const projects = ref([])
const environments = ref([])
const users = ref([])
const selectedProject = ref('')
const selectedEnvironment = ref('')
const selectedEventType = ref('')
const selectedUser = ref('')
const timeRange = ref('week')
const loading = ref(false)
const hasMore = ref(true)
const detailModalVisible = ref(false)
const selectedEvent = ref(null)

// 计算属性
const filteredEvents = computed(() => {
  let filtered = events.value

  if (selectedProject.value) {
    filtered = filtered.filter(event => event.project_id == selectedProject.value)
  }

  if (selectedEnvironment.value) {
    filtered = filtered.filter(event => event.environment?.id == selectedEnvironment.value)
  }

  if (selectedEventType.value) {
    filtered = filtered.filter(event => event.event_type === selectedEventType.value)
  }

  if (selectedUser.value) {
    filtered = filtered.filter(event => event.user?.id == selectedUser.value)
  }

  return filtered.sort((a, b) => new Date(b.event_time).getTime() - new Date(a.event_time).getTime())
})

// 方法
const refreshTimeline = async () => {
  loading.value = true
  try {
    await loadEvents()
  } finally {
    loading.value = false
  }
}

const exportTimeline = () => {
  console.log('导出时间线')
}

const loadMore = async () => {
  if (!hasMore.value || loading.value) return

  loading.value = true
  try {
    console.log('加载更多事件')
  } finally {
    loading.value = false
  }
}

const viewDetails = (event: any) => {
  selectedEvent.value = event
  detailModalVisible.value = true
}

const closeDetailModal = () => {
  detailModalVisible.value = false
  selectedEvent.value = null
}

const onProjectChange = () => {
  console.log('项目变化:', selectedProject.value)
}

const onEnvironmentChange = () => {
  console.log('环境变化:', selectedEnvironment.value)
}

const onEventTypeChange = () => {
  console.log('事件类型变化:', selectedEventType.value)
}

const onUserChange = () => {
  console.log('用户变化:', selectedUser.value)
}

const onTimeRangeChange = () => {
  console.log('时间范围变化:', timeRange.value)
  loadEvents()
}

const getEventTypeClass = (eventType: string) => {
  const typeClasses = {
    'gitlab_commit': 'event-commit',
    'gitlab_merge': 'event-merge',
    'jenkins_build': 'event-build',
    'jenkins_deploy': 'event-deploy'
  }
  return typeClasses[eventType] || 'event-default'
}

const getEventIcon = (eventType: string) => {
  const typeIcons = {
    'gitlab_commit': 'fa fa-code',
    'gitlab_merge': 'fa fa-code-fork',
    'jenkins_build': 'fa fa-cogs',
    'jenkins_deploy': 'fa fa-rocket'
  }
  return typeIcons[eventType] || 'fa fa-circle'
}

const getEventTypeText = (eventType: string) => {
  const typeTexts = {
    'gitlab_commit': 'GitLab提交',
    'gitlab_merge': 'GitLab合并',
    'jenkins_build': 'Jenkins构建',
    'jenkins_deploy': 'Jenkins部署'
  }
  return typeTexts[eventType] || '未知事件'
}

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`

  return date.toLocaleDateString('zh-CN')
}

const loadEvents = async () => {
  try {
    loading.value = true

    // 构建查询参数
    const params: any = {}

    // 添加过滤条件
    if (selectedProject.value) {
      params.project = selectedProject.value
    }
    if (selectedEnvironment.value) {
      params.environment = selectedEnvironment.value
    }
    if (selectedEventType.value) {
      params.event_type = selectedEventType.value
    }
    if (selectedUser.value) {
      params.user = selectedUser.value
    }

    // 添加时间范围过滤
    const now = new Date()
    let startDate = null

    switch (timeRange.value) {
      case 'today':
        startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
        break
      case 'week':
        startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
        break
      case 'month':
        startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
        break
      case 'quarter':
        startDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
        break
    }

    if (startDate) {
      params.created_at__gte = startDate.toISOString()
    }

    console.log('加载DevOps时间线，参数:', params)

    // 调用API获取事件列表
    const response = await devopsTimelineApi.getTimeline(params)
    events.value = response.data?.results || response.data || []

    console.log('DevOps时间线加载完成:', events.value.length, '个事件')
  } catch (error) {
    console.error('加载事件列表失败:', error)
    ElMessage.error('加载事件列表失败')
  } finally {
    loading.value = false
  }
}

const loadProjects = async () => {
  try {
    const { projectApi } = await import('@/api/gitlab')
    const response = await projectApi.getProjects()
    projects.value = response.data.results || []
  } catch (error) {
    console.error('加载项目列表失败:', error)
    ElMessage.error('加载项目列表失败')
  }
}

const loadEnvironments = async () => {
  try {
    const { environmentApi } = await import('@/api/gitlab')
    const response = await environmentApi.getEnvironments()
    environments.value = response.data.results || []
  } catch (error) {
    console.error('加载环境列表失败:', error)
    ElMessage.error('加载环境列表失败')
  }
}

const loadUsers = async () => {
  try {
    const { userApi } = await import('@/api/gitlab')
    const response = await userApi.getUsers()
    users.value = response.data.results || response.data || []
  } catch (error) {
    console.error('加载用户列表失败:', error)
    ElMessage.error('加载用户列表失败')
  }
}

// 生命周期
onMounted(() => {
  loadEvents()
  loadProjects()
  loadEnvironments()
  loadUsers()
})
</script>

<style scoped>
/* 使用与Zabbix管理页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
}

.toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.toolbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group {
  min-width: 150px;
}

/* 原生表单样式 - 超透明效果 */
.glass-select {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.glass-select:focus {
  outline: none !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  background: rgba(164, 244, 186, 0.15) !important;
}

.glass-select option {
  background: #2a5298 !important;
  color: #fff !important;
}

.audit-table-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

/* 工具栏按钮样式 - 完全照抄Zabbix页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }
}

/* 时间线样式 */
.timeline-container {
  position: relative;
  padding-left: 40px;
}

.timeline-line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(164, 244, 186, 0.5), rgba(164, 244, 186, 0.2));
}

.timeline-item {
  position: relative;
  margin-bottom: 32px;
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.timeline-item:hover {
  background: rgba(164, 244, 186, 0.1);
  border-color: rgba(164, 244, 186, 0.3);
  transform: translateX(4px);
}

.timeline-marker {
  position: absolute;
  left: -40px;
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(164, 244, 186, 0.2);
  border: 2px solid rgba(164, 244, 186, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a4f4ba;
  font-size: 14px;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.event-title {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.event-meta {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.event-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.event-meta i {
  color: #a4f4ba;
}

.event-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
  line-height: 1.5;
}

.event-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.action-button {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.3);
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  background: rgba(164, 244, 186, 0.2);
  border-color: rgba(164, 244, 186, 0.5);
  color: #ffffff;
}

/* 事件类型样式 */
.event-commit .timeline-marker {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  color: #22c55e;
}

.event-merge .timeline-marker {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: #3b82f6;
}

.event-build .timeline-marker {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.event-deploy .timeline-marker {
  background: rgba(139, 69, 19, 0.2);
  border-color: rgba(139, 69, 19, 0.5);
  color: #8b4513;
}

/* 空状态 */
.empty-timeline {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-icon {
  font-size: 48px;
  color: rgba(164, 244, 186, 0.3);
  margin-bottom: 16px;
}

.empty-timeline h3 {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

/* 加载更多 */
.load-more {
  text-align: center;
  margin-top: 32px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(164, 244, 186, 0.1);
}

.detail-item .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
}

.detail-item .value {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.detail-json {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
}
</style>
